<template>
  <div class="wrap">
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <LeftAside :v-if="postData.data" :data="postData.data" />
      </el-col>

      <el-col class="right" :span="18">
        <el-row class="search">
          <el-input
            placeholder="请输入想要去的地方，比如：'广州'"
            v-model="searchCity"
            @keyup.native.enter="$router.push(`/post?city=${searchCity}`)"
          >
          </el-input>
          <i
            class="el-icon-search"
            @click="$router.push(`/post?city=${searchCity}`)"
          ></i>
        </el-row>

        <el-row class="recommendCity">
          推荐：
          <nuxt-link to="/post?city=广州">广州</nuxt-link>
          <nuxt-link to="/post?city=上海">上海</nuxt-link>
          <nuxt-link to="/post?city=北京">北京</nuxt-link>
        </el-row>

        <el-row type="flex" justify="space-between" class="title">
          <h4>推荐攻略</h4>
          <el-button type="primary" @click="$router.push('/post/create')">
            <i class="el-icon-edit"></i>
            写游记
          </el-button>
        </el-row>
        <el-row>
          <PostArticle
            :article="article"
            v-for="article in postData.data"
            :key="article.id"
          />
        </el-row>
        <el-row class="pagination">
          <el-pagination
            layout="total,sizes,prev, pager, next,jumper"
            :total="postData.total"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="3"
            :current-page.sync="currentPage"
            @size-change="sizeChange"
            @current-change="currentChange"
            @prev-click="currentChange"
            @next-click="currentChange"
          >
          </el-pagination>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      start: 0,
      limit: 3,
      images: [],
      postData: {},
      searchCity: "",
      currentPage: 1,
    };
  },
  created() {
    this.loadData();
  },
  watch: {
    $route() {
      if (!this.$route.query.limit) {
        this.currentPage = 1;
        this.start = 0;
        this.limit = 3;
      }
      this.loadData();
    },
  },
  methods: {
    loadData() {
      let params = {
        _start: this.start,
        _limit: this.limit,
      };
      if (this.$route.query.city) {
        params.city = this.$route.query.city;
      }
      this.$axios({
        url: "/posts",
        params,
      }).then((res) => {
        this.postData = res.data;
        // console.log(res.data);
      });
    },
    sizeChange(size) {
      this.limit = size;
      this.loadData();
    },
    currentChange(page) {
      this.start = this.limit * (page - 1);
      this.$router.push({
        path: "/post",
        query: {
          start: this.start,
          limit: this.limit,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  .right {
    width: 700px;
    .search {
      position: relative;
      /deep/input {
        border: 2px solid orange;
      }
      /deep/.el-icon-search:before {
        color: orange;
        font-size: 20px;
      }
      .el-icon-search {
        position: absolute;
        top: 10px;
        right: 15px;
        cursor: pointer;
      }
    }
    .recommendCity {
      font-size: 12px;
      color: #888;
      padding: 10px 0;
      a {
        margin-left: 5px;
      }
    }
    .title {
      height: 40px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
      box-sizing: content-box;
      h4 {
        position: relative;
        color: orange;
        font-size: 18px;
        line-height: 40px;
        font-weight: 400;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -9px;
          display: block;
          width: 72px;
          border-bottom: 2px solid orange;
        }
      }
    }
    .pagination {
      margin-top: 20px;
    }
  }
}
</style>